import React from "react"
import "./ArticlesItem.scss"

import dayjs from "dayjs"
// 导入相对时间的插件
import relativeTime from "dayjs/plugin/relativeTime"
// 导入中文语言包
import "dayjs/locale/zh-cn"
import { Link } from "react-router-dom"
// 安装相对时间插件
dayjs.extend(relativeTime)
// 设置语言为中文
dayjs.locale("zh-cn")
function ArticlesItem({ articles }) {
  const { art_id, title, aut_name, comm_count, pubdate, cover } = articles

  return (
    <div className="articlesItem">
      <div>
        <Link
          style={{ textDecoration: "none" }}
          to={`/articleDetail/${art_id}`}
        >
          <h3>{title}</h3>
          {cover.type !== 0 && (
            <div className="articleImage">
              {cover.images.map((item, index) => {
                return <img src={item} key={index} alt=""></img>
              })}
            </div>
          )}

          <div className="articlesBottom">
            <span>{aut_name}</span>
            <span>{comm_count}评论</span>
            <span>{dayjs().to(dayjs(pubdate))}</span>
          </div>
        </Link>
      </div>
    </div>
  )
}

export default ArticlesItem
